import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import { HomeBox } from './style'
import pageNavBottom from '../../config/pageNavBottom';
import { connect } from 'react-redux'
import * as action from '@/action/commonAction'
@connect(state => state.get('common').toJS(),action)
class Home extends Component {
    state = {
        //默认选中
        selectedTab: this.props.selectedTab,
        hidden: false,
    }
   
    renderContent = text => {
        return (
            <h3>{text}</h3>
        );
    }
    render() {
        return (
            <HomeBox>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    {
                        pageNavBottom.map(({title,key,icon,selectedIcon,render}) => (
                            <TabBar.Item
                        title={title}
                        key={key}
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${icon}) center center /  21px 21px no-repeat`
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${selectedIcon}) center center /  21px 21px no-repeat`
                        }}
                        />
                        }
                        selected={this.state.selectedTab === key}

                        onPress={() => {
                            this.setState({
                                selectedTab: key,
                            },() => {
                                this.props.setSelectTabAction(key)
                            });
                        }}
                        data-seed="logId"
                    >
                        {this.renderContent(render)}
                    </TabBar.Item>
                    
                        ))
                    }
                    
                </TabBar>
            </HomeBox>
        );
    }
}

export default Home;

